<template>
  <div class="container flex-1 p" style="height: 100%">
    <!-- 简易模式 -->
    <easyModeTable
      v-show="tableMode === 'easy'"
      ref="easyTable"
      :options.sync="tableOptions"
      :is-edit="false"
      :is-show="isShow"
    />
    <!-- 混合模式 -->
    <blendModeTable
      v-show="tableMode === 'blend'"
      ref="blendTable"
      :options.sync="tableOptions"
      :style="{'background':tableContentBackground,'padding':'5px'}"
      :is-edit="false"
      :is-show="isShow"
      :mapping-function="mappingFunction"
      @dataComplete="dataComplete"
    />
  </div>
</template>
<script>
import easyModeTable from './components/easyModeTable/easyTable.vue'
import blendModeTable from './components/blendModeTable/blendTable.vue'
export default {
  name: 'GeneralTableRender',
  components: { easyModeTable, blendModeTable },
  props: {
    // 表格模式  easy->简易  blend->混合
    tableMode: {
      type: String,
      default: 'easy'
    },
    // 表格内容背景色
    tableContentBackground: {
      type: String,
      default: '#00000000'
    },
    /**
     * 映射函数，两个单元格之间的映射关系
     */
    mappingFunction: {
      type: Function,
      default(item, singleDataMap, renderTBodyData) {
        return item.val
      }
    }
  },
  data() {
    return {
      emptyText: '暂无数据',
      defaultTableJson: '{"options":{},"data":{"tdData":[]}}', // 重置表格配置
      isShow: true, // 默认不显示
      tableOptions: {}, // 表格配置
      returnTableData: [], // 表格返回数据
      multipleDataArray: [], // 多条数据返回结果
      singleDataMap: {} // 单条数据返回结果
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 初始化表格
     * @param tableJson 表格配置信息
     * @param callBack 回调函数
     */
    initTable(tableJson, callBack) {
      this.$nextTick(() => {
        // 转表格json对象为js对象
        const tableJsonObj = JSON.parse(tableJson)
        // 获取表格配置信息
        this.tableOptions = tableJsonObj.options
        // 获取单元格数据
        this.tdData = tableJsonObj.data.tdData
        // 回显表格
        this.getTableRef().echoTable(tableJson)
        // 执行回调
        if (callBack) {
          callBack()
        }
      })
    },
    /**
     * 重置表格
     */
    resetTable() {
      this.$nextTick(() => {
        // 转表格json对象为js对象
        const tableJsonObj = JSON.parse(this.defaultTableJson)
        // 获取表格配置信息
        this.tableOptions = tableJsonObj.options
        // 获取单元格数据
        this.tdData = tableJsonObj.data.tdData
        // 回显表格
        this.getTableRef().echoTable(this.defaultTableJson)
      })
    },
    /**
     * 刷新数据
     * @param multipleDataArray 多数据数组
     * @param singleDataMap 单数据map
     * @param hiddenNoData 是否隐藏无数据效果
     */
    refreshData(multipleDataArray, singleDataMap, hiddenNoData) {
      this.singleDataMap = singleDataMap
      this.multipleDataArray = multipleDataArray
      setTimeout(() => {
        // 调用组件刷新数据
        this.returnTableData = this.getTableRef().tableSetValue(multipleDataArray, singleDataMap, hiddenNoData)
      }, 0)
    },
    /**
     * 根据当前模式获取表格组件的ref
     */
    getTableRef() {
      return this.$refs[this.tableMode + 'Table']
    },
    // 数据加载完成
    dataComplete(param) {
      // 触发数据加载完成
      this.$emit('dataComplete', param)
    }
  }
}
</script>
